<script setup lang="ts">
  import { ref } from 'vue'
  import { noticeInfo } from '@/api'
  import { onLoad } from '@dcloudio/uni-app'
  import mpHtml from '@/components/mp-html/mp-html.vue'
  const noticeDataInfo = ref({})
  onLoad((option:any) => {
    // #ifdef MP-WEIXIN
    uni.showShareMenu({
      withShareTicket: true,
      menus:["shareAppMessage","shareTimeline"]
    })
    // #endif
    noticeInfo({id:option.id}).then(res => {
      if(res.code == 200){
        const data = JSON.parse(JSON.stringify(res.data))
        data.pic = data.pic ? JSON.parse(data.pic) : []
        noticeDataInfo.value = data
      }
    })
  })
</script>

<template>
  <xx-title title="资讯详情"/>
  <view class="notice-body">
    <view class="notice-title">{{noticeDataInfo.title}}</view>
    <view class="notice-time">
      <text>{{noticeDataInfo.createdUserName}}</text> · {{noticeDataInfo.createdTime}}
    </view>
    <view class="notice-content">
      <view class="notice-pic" v-if="noticeDataInfo?.pic?.length > 0">
        <image mode="widthFix" :src="noticeDataInfo.pic[0].fullUrl"/>
      </view>
      <mp-html :content="noticeDataInfo.content" containerStyle="font-size:28rpx;line-height:1.8;color:#505363"/>
    </view>
  </view>
</template>

<style scoped lang="scss">
.notice-body{
  background-color: #FFFFFF;
  padding: 20rpx;
  .notice-title{
    color: #505363;
    font-size: 40rpx;
    font-weight: 500;
  }
  .notice-time{
    font-size: 24rpx;
    color: #818496;
    margin: 16rpx 0;
    text{
      color: #AF6941;
    }
  }
  .notice-content{
    width: 100%;
    .notice-pic{
      width: 100%;
      image{
        border-radius: 20rpx;
        width: 100%;
      }
    }
  }
}
video{
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}
</style>
